<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
    <!-- HELPERS-->
    <script type="text/javascript" src="Lib/objects-extensions.js"></script>
    <script type="text/javascript" src="Lib/animation.js"></script>
    <!--Actual lib-->
    <script type="text/javascript" src="Lib/common.js"></script>
	<script type="text/javascript" src="Lib/scene.js"></script>
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var IE = false;
    </script>
    <!--[IF IE]>
    <script type="text/javascript">
        IE = true;
    </script>
<![endif]-->
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Tests</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
                <div class="property">
                    No controls available
                </div>
                
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="c" style="border:2px solid black;background-image:url('./images/img.jpg')"></canvas>
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;">
				<h2>Moving and Jumping Dude</h2>
				A dude running and jumping, controlled by arrow keys.
                <br />
                Featuring - gravity, velocities control and image sprites.
                <br /><br /><br /><br />		
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
	    var scene = new Scene2D("c");

	    function MovingDude(scene) {
	        this.scene = scene;
	        this.groundHeight = 100;
	        this.dudeHeight = 100;
	        this.dudeSpeed = 200;

	        this.jumping = 0;

	        this.addEventSimple = function (elem, event, fn) {
	            if (elem.addEventListener) {
	                elem.addEventListener(event, fn, false);
	            } else {
	                elem.attachEvent("on" + event, function() {
	                    // set the this pointer same as addEventListener when fn is called
	                    return(fn.call(elem, window.event));   
	                });
	            }
	        }

	        this.initGround = function () {
	            var canvas = this.scene.canvas;
	            var groundHeight = this.groundHeight;
	            var ground = new Rectangle2D(0, canvas.height - groundHeight, canvas.width, canvas.height - groundHeight);
	            ground.fill.enabled = true;
	            ground.fill.color = "#0A1F33";
	            ground.id = "ground";
	            this.scene.add(ground);
	        }

	        this.initDude = function () {
	            var canvas = this.scene.canvas;
	            var groundHeight = this.groundHeight;
	            var dudeHeight = this.dudeHeight;
	            var self = this;
	            self.dude = new ImageSprite2D(0, canvas.height - groundHeight - dudeHeight, 150, 150, 2, 8, 200, 200, "./images/dude.png");
	            self.dude.spriteNumber = 8;
	            self.dude.setCurrentSprite(1,2);
	            self.initDudeProperties();
	        }
	        this.dudeSpriteIndex = 3;
	        this.lastTime = null;
	        this.initDudeProperties = function () {
	            var self = this;
	            var canvas = this.scene.canvas;
	            var groundHeight = this.groundHeight;
	            var dudeHeight = this.dudeHeight;
	            this.dude.bind("onmoving", function (args) {
	                var canvas = self.scene.canvas;
	                var groundHeight = self.groundHeight;
	                var hitGround = (args.y + args.height) > canvas.height - groundHeight;
	                var hitLeft = args.x < 0;
	                var hitRight = args.x + args.width > canvas.width;
	                if (hitGround) {
	                    self.jumping = 0;
	                    args.shape.location.y = canvas.height - groundHeight - args.shape.size.height;
	                }	                
	                if (!self.lastTime) self.lastTime = args.time;
	                if (self.movingRight) {
	                    self.dude.setSpriteRow(1);
	                }
	                if (self.movingLeft) {
	                    self.dude.setSpriteRow(0);
	                }
	                if (args.time - self.lastTime > 180) {
	                    if (self.movingRight) {
	                        
	                        self.dude.setNextSpriteOnRow();	                        
	                    }
	                    if (self.movingLeft) {
	                        
	                        self.dude.setPrevSpriteOnRow();
	                    }
	                    self.lastTime = args.time;
	                }
	                
	                return !hitGround && !hitLeft && !hitRight;
	            });

	            this.addEventSimple(window, "keydown", function (e) {
	                var evt = (e) ? e : (window.event) ? window.event : null;
	                if (evt) {
	                    var key = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
	                    if (key == 38)
	                        self.jump();
	                    if (key == 37)
	                        self.moveLeft();
	                    if (key == 39)
	                        self.moveRight();
	                }
	            });
	            this.addEventSimple(window, "keyup", function (e) {
	                var evt = (e) ? e : (window.event) ? window.event : null;
	                if (evt) {
	                    var key = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
	                    if (key == 37)
	                        self.stopMovingLeft();
	                    if (key == 39)
	                        self.stopMovingRight();
	                }
	            });

	            this.scene.add(this.dude);
	        }

	        this.init = function () {
	            this.initGround();
	            this.initDude();
	            this.scene.invalidate();
	        }

	        this.jump = function () {
	            if (this.jumping > 0) return;
	            this.jumping = 1;
	            this.dude.getForce("gravity").ay = 500;
	            this.dude.velocity.dy = -300;
	        }
	        
	        this.moveLeft = function () {
	            this.movingLeft = true;
	            this.movingRight = false;
	            
	            this.dude.setSpriteRow(0);

	            this.dude.velocity.dx = -this.dudeSpeed;
	        }
	        this.moveRight = function () {
	            this.movingLeft = false;
	            this.movingRight = true;
	            
	            this.dude.setSpriteRow(1);
	            
	            this.dude.velocity.dx = this.dudeSpeed;
	            
	        }
	        this.stopMovingLeft = function () {	            
	            this.movingLeft = false;
	            if (this.dude.velocity.dx<0)
	                this.dude.velocity.dx = 0;
	            //this.dude.changeImage("./images/man-running-left.png");
	            this.dude.setCurrentSprite(0,5);
	        }
	        this.stopMovingRight = function () {	            
	            this.movingRight = false;
	            if (this.dude.velocity.dx > 0)
	                this.dude.velocity.dx = 0;
	            //this.dude.changeImage("./images/man-running.png");
	            this.dude.setCurrentSprite(1, 2);
	        }
	    }

	    var movingDude = new MovingDude(scene);
	    movingDude.init();
	   
	    

	  
	</script>
</body>
</html>